<template>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
        <el-form :model="form" label-width="120px">
            <el-form-item label="电费单价" prop="unitPrice">
                <el-input v-model="form.unitPrice" readonly/>
            </el-form-item>
            <el-form-item label="充值金额(元)" prop="amount">
                <el-input v-model="form.amount" @input="changeAmount"/>
            </el-form-item>
            <el-form-item label="充值度数" prop="region">
                <el-input v-model="electricNumber" readonly/>
            </el-form-item>
            <el-form-item prop="cc">
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { payElectricMeter } from '@/api/equipment/electricity'

export default {
    data() {
        return {
            dialogTitle: '',
            dialogVisible: false,
            form: {
                sn: '0',
                unitPrice: '0',
                amount: ''
            },
            electricNumber: '0'
        }
    },
    methods: {
        open(row) {
            // console.log(row)
            this.dialogVisible = true
            this.dialogTitle = '充值'
            this.form.unitPrice = row.unitPrice
            this.form.amount = ''
            this.form.sn = row.sn
        },
        // 改变金额
        changeAmount() {
            if (this.form.amount === '' || this.form.amount === null) {
                this.electricNumber = '0'
                return
            }
            this.electricNumber = (parseFloat(this.form.amount) / parseFloat(this.form.unitPrice)).toFixed(2).toString()
        },
        async onSubmit() {
            await payElectricMeter(this.form)
            this.$message.success('充值成功')
            this.dialogVisible = false
            this.$emit('success')
        }
    }
}

</script>

<style scoped>

</style>
